<template>
  <transition name="slide">
    <div class="active-detail">
      <page-header title="核销"></page-header>
      <vue-qr class="qr-code" :text="qrConfig.text" :margin="0"></vue-qr>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import 'swiper/dist/css/swiper.css'
  import VueQr from 'vue-qr'
  export default {
    components: {
      PageHeader,
      VueQr
    },
    data () {
      return {
        id: '',
        qrConfig: {
          text: ''
        }
      }
    },
    created() {
      this.qrConfig.text = this.$route.params.id
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style lang="less">
  .slide-enter-active,.slider-leave-active {
    transition: all 0.3s
  }
  .slide-enter,.slide-leave-to {
    transform: translate3d(100%, 0, 0)
  }
  .active-detail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    background-color: #e6e6e6;
    z-index: 992;
    .qr-code img{
      width: 100%;
    }
  }
</style>
